<template>
  <div class="content">
    <h2>当前计数: {{ counter }}</h2>
    <button @click="counter++">+1</button>
    <button @click="name = 'kobe'">修改name</button>
  </div>
</template>

<script>
  import { watchEffect, ref, watch } from 'vue'
  export default {
    setup() {
      const counter = ref(0)
      const name = ref('why')

      // watchEffect传入的函数会被自动执行,在执行的过程中,会自动收集依赖,只要里面的任意一个依赖发生变化,就会自动执行
      const flag = watchEffect(() => {
        console.log('========================', counter.value, '  ', name.value)
        // counter.value > 5 时,停止监听,只是停止了侦听,coutner.value的值还是可以修改的
        if (counter.value > 5) {
          flag()
        }
      })
      return {
        counter,
        name
      }
    }
  }
</script>

<style scoped>
</style>